<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <% include partials/meta.ejs %>
  <meta http-equiv="description" content="<%= description %>">
  <meta name="description" content="<%= description %>">
  <meta name="keywords" content="<%= keywords %>">
  <meta name="author" content="<%= author %>">
  <title>
    <%= title %>
  </title>
  <link rel='stylesheet' href='/styles/main.css' />
</head>

<body class="bg-zinc-50 dark:bg-black">
  <%- include('partials/header.ejs', {selectedIndex: 3}) %>
  <main class="flex-auto">
    <div class="sm:px-8 mt-16 sm:mt-32">
      <div class="mx-auto w-full max-w-7xl lg:px-8">
        <div class="relative px-4 sm:px-8 lg:px-12">
          <div class="mx-auto max-w-2xl lg:max-w-5xl">
            <header class="max-w-2xl">
              <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100">分享我的设备喜好以及一些生产力工具推荐。</h1>
              <p class="mt-6 text-base text-zinc-600 dark:text-zinc-400">我经常被问到我用来构建软件、保持生产力的东西，或者买东西来安慰自己，让自己认为我很有生产力，而我真的只是在拖延。这里有一个我最喜欢的东西的大清单。</p>
            </header>
            <div class="mt-16 sm:mt-20">
              <div class="space-y-20">
                <section aria-labelledby=":S1:"
                  class="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40">
                  <div class="grid max-w-3xl grid-cols-1 items-baseline gap-y-8 md:grid-cols-4">
                    <h2 id=":S1:" class="text-sm font-semibold text-zinc-800 dark:text-zinc-100">工作台</h2>
                    <div class="md:col-span-3">
                      <ul role="list" class="space-y-16">
                        <li class="group relative flex flex-col items-start">
                          <h3 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">Windows 11，32GB RAM，1TB SSD，较新的中高端英特尔或AMD CPU</h3>
                          <p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">作为一名前端开发者，我认为Mac与Win的区别在前端并不大，除却特殊一定需要OC或Swift开发macOS系统应用，Win的开放性更加适合前端工程师。当然，你需要一块很不错的显示器，否则阴影你可能将看不到。</p>
                        </li>
                        <li class="group relative flex flex-col items-start">
                          <h3 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">一至两块额外的全色域显示器，尺寸不要太大</h3>
                          <p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">作为专业的前端开发者，一块屏幕在生产力上来说，几乎是不可能够用的，尤其是笔记本情况下。所以，我喜欢一至两块额外的全色域显示器，尺寸并不需要太大。</p>
                        </li>
                        <li class="group relative flex flex-col items-start">
                          <h3 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">一款红轴的机械键盘</h3>
                          <p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">这是综合考量，无论是手感还是噪音都相对均衡的键盘。当然，买笔记本电脑时候请务必观察键盘手感，那很重要，当你出差的时候。</p>
                        </li>
                        <li class="group relative flex flex-col items-start">
                          <h3 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">光电鼠标</h3>
                          <p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">配合上面说的键盘使用，如果使用的是笔记本自带键盘与触摸板，则不需要。</p>
                        </li>
                      </ul>
                    </div>
                  </div>
                </section>
                <section aria-labelledby=":S2:"
                  class="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40">
                  <div class="grid max-w-3xl grid-cols-1 items-baseline gap-y-8 md:grid-cols-4">
                    <h2 id=":S2:" class="text-sm font-semibold text-zinc-800 dark:text-zinc-100">开发者工具</h2>
                    <div class="md:col-span-3">
                      <ul role="list" class="space-y-16">
                        <li class="group relative flex flex-col items-start">
                          <h3 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">Visual Studio Code</h3>
                          <p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">前端神器，JavaScript神器，无论是前端还是Nodejs开发，这都是最棒的编辑器。</p>
                        </li>
                        <li class="group relative flex flex-col items-start">
                          <h3 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">Git Bash
                          </h3>
                          <p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">如果说Windows有什么令我头疼的问题，那就是字带终端与Unix等的割裂行为，所以需要TA来解决终端与Git的场景。</p>
                        </li>
                        <li class="group relative flex flex-col items-start">
                          <h3 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">思源笔记
                          </h3>
                          <p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">技术人员应该拥有时刻记录自己问题的工具，思源笔记就是这样的工具。最重要他可以无缝发布到相关的博客平台，这对于技术人员来说是很重要的。</p>
                        </li>
                      </ul>
                    </div>
                  </div>
                </section>
                <section aria-labelledby=":S3:"
                  class="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40">
                  <div class="grid max-w-3xl grid-cols-1 items-baseline gap-y-8 md:grid-cols-4">
                    <h2 id=":S3:" class="text-sm font-semibold text-zinc-800 dark:text-zinc-100">设计</h2>
                    <div class="md:col-span-3">
                      <ul role="list" class="space-y-16">
                        <li class="group relative flex flex-col items-start">
                          <h3 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">Figma</h3>
                          <p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">事实上，我对于设计工具没有什么强要求。当开发前端时候，我只有一个要求，可以给出CSS或TailwindCSS的代码，相信这就是Figma的魅力。</p>
                        </li>
                      </ul>
                    </div>
                  </div>
                </section>
                <section aria-labelledby=":S4:"
                  class="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40">
                  <div class="grid max-w-3xl grid-cols-1 items-baseline gap-y-8 md:grid-cols-4">
                    <h2 id=":S4:" class="text-sm font-semibold text-zinc-800 dark:text-zinc-100">生产力</h2>
                    <div class="md:col-span-3">
                      <ul role="list" class="space-y-16">
                        <li class="group relative flex flex-col items-start">
                          <h3 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">UTools
                          </h3>
                          <p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">这是可以设计为alt+space呼出的全局工具，几乎可以满足所有要求。对于生产力的提升，我可以评估为20%以上。
                          </p>
                        </li>
                        <li class="group relative flex flex-col items-start">
                          <h3 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">ApiFox
                          </h3>
                          <p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">2024年了，要问最棒的API接口管理工具，我只能说ApiFox。每当TA更新出更好的为开发者服务的功能时候，总能让我眼前一亮。</p>
                        </li>
                        <li class="group relative flex flex-col items-start">
                          <h3 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">WPS
                          </h3>
                          <p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">中国最好的协同办公软件，没有之一。无论是覆盖面积以及提供的功能，如思维导图、流程图、智能文档等功能，都可以满足90%的工作需求。若要说不足，就是基本没有反馈功能。</p>
                        </li>
                        <li class="group relative flex flex-col items-start">
                          <h3 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">Vivo 手机</h3>
                          <p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">如今移动端优先的情况下，一款好用且功能丰富的手机，对于生产力提升是至关重要的。我认为中国手机中，最棒的手机是Vivo家的，无论是硬件还是操作系统，都是其中的佼佼者。</p>
                        </li>
                      </ul>
                    </div>
                  </div>
                </section>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <% include partials/footer.ejs %>
</body>

</html>